<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">  
  <title>JCalculator</title>
  <link rel="stylesheet" href="./public/css/base.css">
  <link rel="stylesheet" href="./public/css/prism.css">
</head>
<body>
  <header>
    <img class="logo" src="./public/img/logo.png" alt="logo">
    <nav class="nav">
      <ul>
        <li class="nav-item active">主页</li>
        <li class="nav-item"><a href="./page/doc.html">文档</a></li>
        <li class="nav-item "><a href="./page/leftJoin.html">示例</a></li>
      </ul>
    </nav>
  </header>
  <section class="main">
    <ul class="node-list">
      <li class="node">
        <div id="introduce" class="href"></div>
        <h1>介绍</h1>
        <div class="line"></div>
        <p class="explain">JCalculator是一款专门给前端工程师使用计算器，使前端复杂聚合计算和数据格式转换更加简单，数据处理代码逻辑更加可读。</p>
        <p class="explain">JCalculator可以在node,web,worker环境使用，能够基本模拟SQL单表查询和聚合的数据处理逻辑。还有一些对数据表类格式的数据进行格式转换、补全的函数。也有一些基础循环，聚合的函数。还会有更多的数据处理函数慢慢更新到JCalculator，也期待您的加入。</p>
        <p class="explain">JCalculator的设计理念是灵活，简易，提高前端复杂数据处理和计算的开发体验。甚至在前后端分离的情况下提高服务端开发者的开发体验，把一部分甚至全部复杂数据处理逻辑放到浏览器通过JCalculator就能简单处理，同时让业务逻辑更多集中在前端客户端，无论是面向需求更改还是代码管理都更加方便。我希望JCalculator所需输入的数据格式都支持数据库表查询得出的数据，统一数据库，服务端，前端的数据结构和数据聚合逻辑。而特殊的非接近数据表数据结构的数据，应该由JCalculator输出或者数据处理应该逻辑封装在前端组件内部，日常开发尽可能不需要处理非接近数据表数据结构的数据，从而在数据处理的层面达到高度可控、灵活、简单。目前我也是在为这种使用场景努力</p>
        <p class="explain">当然，使用JCalculator并不一定要在上述使用场景，这只是一款数据处理工具库，但在上述场景会有更优表现。</p>
      </li>
      <li class="node">
        <div id="start" class="href"></div>
        <h1>开始</h1>
        <div class="line"></div>
        <p class="explain">node: npm install JCalculator</p>
        <p class="explain">web : &lt;script src = "JCalculator.min.js">&lt;/script></p>
        <pre class="show-code">
          <code class="language-javascript">
            // 模拟数据
            var data = [
              { name: "apple", sell: 15, week: 2 },
              { name: "apple", sell: 5, week: 3 },
              { name: "apple", sell: 13, week: 4 },
              { name: "apple", sell: 3, week: 5 },
              { name: "banana", sell: 4, week: 2 },
              { name: "banana", sell: 5, week: 3 },
              { name: "banana", sell: 2, week: 4 },
              { name: "banana", sell: 2, week: 5 }
            ];

            // 聚合运算
            var test = jc.sql({
              select:{
                col: "name",
                sum: "sell"
              },
              from: data,
              where: function (row) {
                return row.week > 2
              },
              groupBy: "name"
            })
            console.log(test);
            /* output: [
                {"name":"apple","sum_sell":21},
                {"name":"banana","sum_sell":9}
              ]*/
          </code>
        </pre>
      </li>
    </ul>
  </section>
<script src="./public/js/zepto.min.js"></script>
<script src="./data/question.js"></script>
<script src="./public/js/prism.js"></script>
<script>
  $(".dot").click(function(){
    if($(this).hasClass("dot-left")){
      $(this).removeClass("dot-left").addClass("dot-bottom");
    }else{
      $(this).removeClass("dot-bottom").addClass("dot-left");
    }
    $(this).siblings(".category-list").toggle()
  })
</script>
</body>
</html>